<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫光</title>
    <style>
        .img-dl {
            /* 外部设置, 要保证尺寸和图片相同 */
            position: relative;
            overflow: hidden;
            width: fit-content;
            height: fit-content;
        }
        .img-dl img {
            /* 图片设置 */
            width: 300px;
        }

        .img-dl::before {
            /* 扫光 */
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(60deg, #fff0 40%, #fffb, #fff0 60%);
            animation: at-img-scan-dl 2s linear infinite forwards;
            pointer-events: none;
        }
        /* 动画 */
        @keyframes at-img-scan-dl {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(100%);
            }
        }
    </style>
</head>
<body style="background-color: #ccc;">
    <!-- 增加一个和目标图片一样的 mask, 可使 scan 在图片非透明区域展示 -->
    <div class="img-dl" style="mask: url(./assets/title-1.png) 0 0/100% no-repeat;">
        <img src="./assets/title-1.png" alt="">
    </div>
</body>
</html>